<template>
  <Header></Header>
  <div class="home">
    <div class="home-nav">
      <van-tabs v-model:active="active">
        <van-tab title="推荐" class="active">
          <div class="home-lunbo">
            <!-- 轮播图 -->
            <van-swipe>
              <van-swipe-item v-for="item in HomeStore.lunboList" :key="item.id">
                <van-image :src="item.picUrl" height="140" width="100%"></van-image>
              </van-swipe-item>
              <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
              </template>
            </van-swipe>
          </div>

          <!-- 口号部分 -->
          <div class="home-kouhao">
            <div class="kouhao-item" v-for="item in HomeStore.kouhaoList" :key="item.id">
              <img :src="item.icon" alt="" />
              <span>{{ item.desc }}</span>
            </div>
          </div>

          <!-- 分类导航部分 -->
          <div class="home-classifyNav">
            <div class="classifyNav-item" v-for="(item, index) in HomeStore.kingkongList" :key="index" @click="gotoClassifyNav">
              <img :src="item.picUrl" alt="" />
              <span>{{ item.text }}</span>
            </div>
          </div>

          <!-- 新人专项礼 -->
          <div class="home-louceng">
            <!-- 上半部分 -->
            <div class="louceng-content">- 新人专项礼 -</div>
            <!-- 下半部分 -->
            <div class="louceng-img">
              <!-- 左边 -->
              <div class="louceng-img-right">
                <p>新人专享礼包</p>
                <img src="@/static/static-union_1648017994dd2933.png" alt="" />
              </div>
              <!-- 右边 -->
              <div class="louceng-img-flet">
                <!-- 单个 -->
                <div class="flet-item" v-for="item in HomeStore.indexActivityModule">
                  <p>福利社</p>
                  <p>今日特价</p>
                  <img :src="item.picUrl" alt="" />
                </div>
              </div>
            </div>
          </div>

          <!-- 类目热销榜 -->
          <div class="home-categoryHot">
            <!-- 类目排行榜 -->
            <div class="categoryHot-text">{{ HomeStore.homeListData?.categoryHotSellModule?.title }}</div>
            <!-- 上半部分 -->
            <div class="categoryHot-top">
              <div class="HotTop">
                <div class="top-right">
                  <div class="text">居家生活榜</div>
                  <div class="border"></div>
                  <img src="@/static/微信图片_20221011160228.jpg" alt="" />
                </div>
                <div class="top-flet">
                  <div class="text">美食酒水榜</div>
                  <div class="border"></div>
                  <img src="@/static/微信图片_20221011160228.jpg" alt="" />
                </div>
              </div>
              <div class="HotButtom">
                <div class="HotButtom-item" v-for="(item, index) in HomeStore.categoryList" :key="index">
                  <div class="text">{{ item.categoryName }}</div>
                  <img :src="item.picUrl" alt="" />
                </div>
                <!-- <div class="HotButtom-item">
                  <div class="text">服饰鞋包榜</div>
                  <img src="@/static/微信图片_20221011160228.jpg" alt="" />
                </div>
                <div class="HotButtom-item">
                  <div class="text">服饰鞋包榜</div>
                  <img src="@/static/微信图片_20221011160228.jpg" alt="" />
                </div> -->
              </div>
            </div>
            <!-- 下半部分 -->
            <div class="categoryHot-buttom">
              <!-- 左边 -->
              <div class="buttom-right" v-for="(item, index) in HomeStore.sceneLightShopping" :key="index">
                <div class="right-top">
                  <p>{{ item.title }}</p>
                  <p>{{ item.desc }}</p>
                </div>
                <div class="right-buttom">
                  <img :src="item.picUrl" alt="" />
                  <!-- <img src="@/static/logo.png" alt="" /> -->
                </div>
              </div>
              <!-- 右边 -->
              <!-- <div class="buttom-left">
                <div class="left-top">
                  <p>临期清仓</p>
                  <p>5折不用抢</p>
                </div>
                <div class="left-buttom">
                  <img src="@/static/logo.png" alt="" />
                  <img src="@/static/logo.png" alt="" />
                </div>
              </div> -->
              <!-- <div></div> -->
            </div>

            <!-- 最下部分 -->
            <div class="home-floot">
              <!-- 两个按钮 -->
              <div class="floor-top">
                <van-button type="default" size="mini">下载APP</van-button>
                <van-button type="default" size="mini">电脑版</van-button>
              </div>
              <!-- 文字区域 -->
              <div class="floor-text">
                <span>网易公司版权所有1997-2023</span>
                <span>食品经营许可证: JY13301080111719</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="居家生活">内容 2</van-tab>
        <van-tab title="服饰鞋包">内容 3</van-tab>
        <van-tab title="美食酒水">内容 4</van-tab>
        <van-tab title="居家生活">内容 2</van-tab>
        <van-tab title="服饰鞋包">内容 3</van-tab>
        <van-tab title="美食酒水">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/views/home/Header/index.vue'
// 导入home 仓库

import { useHomeStore } from '@/stores/home'
// 导入ref
import { ref, onMounted, computed } from 'vue'
// 创建home仓库实例
const HomeStore = useHomeStore()

const active = ref(0)

// 点击去某个频道
const gotoClassifyNav = () => {}

// 获取首页数据的回调
const getHomeData = async () => {
  // 获取首页数据
  await HomeStore.getHomeListDat()
}
// 在组件挂载之后进行发送请求
onMounted(() => {
  getHomeData()
})
</script>

<style scoped>
/* 修改vant基础样式 */
:deep(.van-tabs__line) {
  border-bottom: 1px solid red !important;
  background: #fff;
  border-radius: 0%;
  bottom: 25px;
  /* buttom: 22px; */
}

:deep(.van-tab) {
  font-size: 13px;
  color: black;
}
/* 轮播图 */
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.home-lunbo {
  margin-top: -10px;
}

/* 口号部分 */
.home-kouhao {
  display: flex;
  justify-content: space-around;
}

.kouhao-item {
  display: flex;
  align-items: center;
}
.kouhao-item img {
  width: 13px;
  height: 13px;
  margin-right: 3px;
}

/* 分类导航样式 */
.home-classifyNav {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}

.classifyNav-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.classifyNav-item img {
  width: 45px;
  height: 45px;
  margin: 10px;
  border-radius: 15px;
}

.classifyNav-item span {
  font-size: 12px;
  text-align: center;
  margin-top: -6px;
}

/* 新人专享礼 */

.home-louceng {
  height: 260px;
  padding: 0 5px;
}

.louceng-content {
  font-size: 15px;
  text-align: center;
  line-height: 10px;
  margin: 18px 0 15px 0;
}

.louceng-img {
  display: flex;
  /* padding: 0 10px; */
}
.louceng-img .louceng-img-right {
  position: relative;
  font-size: 17px;
  height: 210px;
  width: 180px;
  background-color: rgb(249, 233, 207);
  margin-right: 3px;
}
.louceng-img .louceng-img-right p {
  position: absolute;
  top: 20px;
  left: 13px;
}
.louceng-img .louceng-img-right img {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translate(-50%);
  width: 130px;
  height: 130px;
  margin-right: 3px;
}
/* .louceng-img .louceng-img-flet {
} */
.flet-item {
  height: 104px;
  width: 180px;
  position: relative;
  background-color: rgb(251, 226, 211);
  margin-bottom: 3px;
}

.flet-item p:first-child {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 16px;
}

.flet-item p:last-of-type {
  position: absolute;
  top: 37px;
  left: 20px;
  font-size: 12px;
}

.louceng-img .louceng-img-flet img {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 70px;
  height: 80px;
}

/* 类目热销榜 */
.home-categoryHot {
  padding: 0 10px;
  /* 这里不管用 */
  /* height: calc(100% - 770px); */
  height: 380px;
}

.home-categoryHot .categoryHot-text {
  font-size: 15px;
  margin-bottom: 15px;
}

/* 类目热销榜上半部分 */
.HotTop {
  display: flex;
}
.top-right {
  width: 50%;
  height: 93px;
  margin-right: 5px;
  background-color: rgb(249, 243, 228);
  position: relative;
}
.top-right img {
  position: absolute;
  left: 40%;
  width: 50%;
}
.top-right .text {
  /* text-align: center; */
  position: absolute;
  top: 50%;
  left: 10px;
  /* border-bottom: 1px solid #000; */
}
.top-right .border {
  position: absolute;
  top: 70%;
  left: 10px;
  width: 20px;
  border-bottom: 2px solid #000;
}
.top-flet {
  width: 50%;
  height: 93px;
  background-color: rgb(235, 239, 246);
  position: relative;
}
.top-flet img {
  position: absolute;
  left: 40%;
  width: 50%;
}

.top-flet .text {
  /* text-align: center; */
  position: absolute;
  top: 50%;
  left: 10px;
}

.top-flet .border {
  position: absolute;
  top: 70%;
  left: 10px;
  width: 20px;
  border-bottom: 2px solid #000;
}

/* 类目热销榜下半部分 */
.HotButtom {
  /* 宽度和高度 */
  /* 测试 */
  /* height: 300px; */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.HotButtom-item {
  margin: 5px 3px 0 0;
  width: 24%;
  height: 90px;
  background-color: rgb(245, 245, 245);
  position: relative;
}

.HotButtom-item .text {
  margin: 5px 0 5px;
  text-align: center;
}
.HotButtom-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  height: 50px;
  width: 50px;
}

/* 临期清仓 */

.categoryHot-buttom {
  margin-top: 30px;
  height: 140px;
  display: flex;
  /* justify-content: space-between; */
}
.buttom-right {
  margin-right: 4px;
  width: 50%;
  background-color: rgb(245, 245, 245);
}
.right-top {
  height: 40px;
}
.right-top :first-child {
  font-size: 15px;
  margin: 10px 20px 4px;
}

.right-top :last-child {
  font-size: 12px;
  margin-left: 20px;
  color: red;
}
.right-buttom {
  display: flex;
}
.right-buttom img {
  width: 75px;
  height: 75px;
  margin-left: 10px;
}
.buttom-left {
  width: 50%;
  background-color: rgb(245, 245, 245);
}

.left-top {
  height: 40px;
}
.left-top :first-child {
  font-size: 15px;
  margin: 10px 20px 4px;
}

.left-top :last-child {
  font-size: 12px;
  margin-left: 20px;
  color: red;
}

.left-buttom {
  display: flex;
}
.left-buttom img {
  width: 75px;
  height: 75px;
  margin-left: 10px;
}

/* 页脚部分 */
.home-floot {
  background-color: rgb(65, 65, 65);
  height: 150px;
  color: #666;
  margin-top: 20px;
  position: relative;
}

.floor-top {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%);
}

.floor-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 40%;
  left: 23%;
}
</style>
